<!--
 * @Date: 2025-12-01 16:56:14
 * @Description: 折线图
 * @LastEditTime: 2025-12-02 15:20:19
-->
<template>
  <div class="charts" ref="chartRef"></div>
</template>

<script>
import echarts from 'echarts';
let myCharts = null;
const fontSize = 12;
const colorRgb = '4, 168, 255';
export default {
  name: 'LineChart',
  props: {
    list: { type: Array, default: () => [] },
  },
  mounted() {
    myCharts = echarts.init(this.$refs.chartRef);
  },
  watch: {
    list: {
      handler(newVal) {
        if (!newVal || newVal.length === 0) return;
        this.$nextTick(() => {
          this.initChart(newVal);
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initChart(dataList) {
      const data = dataList.map((item) => item.orderNum);
      const xAxisData = dataList.map((item) => item.month);
      const options = this.getOptions(data);
      options.xAxis.data = xAxisData;
      myCharts.setOption(options, true);
    },
    getOptions(data) {
      return {
        tooltip: {
          show: true,
          trigger: 'axis',
          confine: true,
          axisPointer: {
            type: 'none',
          },
        },
        grid: {
          top: 30,
          left: '4%',
          right: '6%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: [],
          offset: 10,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#fff',
            fontSize,
          },
          axisLine: {
            show: true,
            color: '#658292',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(101, 130, 146, 0.3)',
              type: 'dashed',
            },
          },
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitNumber: 4,
          axisLabel: {
            fontSize,
            color: '#fff',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(101, 130, 146, 0.3)',
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '近半年云店销售趋势',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: `rgb(${colorRgb})`,
              borderColor: '#fff',
              borderWidth: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: `rgba(${colorRgb}, 0.4)` },
                  { offset: 1, color: `rgba(${colorRgb}, 0)` },
                ],
                false
              ),
              shadowColor: `rgba(${colorRgb}, 0.5)`,
              shadowBlur: 20,
            },
            emphasis: {
              label: {
                show: true,
                position: 'top',
                fontSize,
                color: '#fff',
              },
            },
            data,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
